<template>

	<view class="page">
		<view class="content">
			<TnSteps v-model="currentStep" mode="dotIcon" active-color="#EA4E34" disabled>
				<TnStepsItem v-for="(item, index) in stepsData" :color="item.color" :key="index" active-color="#EA4E34"
					:title="item.title" :activeIcon="item.activeIcon" />
			</TnSteps>
			<!-- 身份认证 -->
			<view v-if="currentStep==0">
				<view class="check-image" @click="takePhoto('frontImg')">
					<image mode='aspectFit' class="check-image-bg" :src="frontImg" v-if="frontImg"></image>
					<view v-else>
						<image src="../../static/images/front.png" class="check-image-bg"></image>
						<image style="width:98rpx;height:98rpx" src="../../static/images/camera.png" class="camera">
						</image>
						<text>拍摄正面</text>
					</view>

				</view>
				<view class="check-image" @click="takePhoto('backImg')">
					<image mode='aspectFit' class="check-image-bg" :src="backImg" v-if="backImg"></image>
					<view v-else>
						<image src="../../static/images/back.png" class="check-image-bg"></image>
						<image src="../../static/images/camera.png" class="camera">
						</image>
						<text>拍摄反面</text>
					</view>
				</view>
				<view class="tn-flex justify-center">
					<TnButton width="90%" height='64' type="danger" shape="round" @click="goCheckFace">确认提交</TnButton>
				</view>
			</view>
			<!-- 人脸识别 -->
			<view class="" v-else-if="currentStep ==1"
				style="display:flex;justify-content: center;align-items: center;flex-direction: column;">
				<view style="padding:40rpx;">
					<camera device-position="front" flash="off" binderror="error"
						style="width: 86vw; height: 700rpx;margin:0 auto;z-index:10000;overflow: hidden;">
					</camera>
				</view>
				<view class="tn-flex justify-between btns">
					<TnButton width="45%" height='64' type="danger" shape="round" @click="goPrev">上一步</TnButton>
					<TnButton width="45%" height='64' type="danger" shape="round" @click="getFace">识别</TnButton>
				</view>
			</view>
			<!-- 联网核查 -->
			<view v-else="currentStep ==2">
				<view class="online-check">

					<view class="" v-if="verifyStatus">
						<image src="../../static/images/succes.png" class="check-success"></image>
						<view class="tn-mt-xl tn-mb-xl">核验成功，可以进行贷款申请。</view>
					</view>
					<view class="" v-else>
						<TnLoading size='96' show mode="flower" />
						<view class="tn-mt-xl  tn-mb-xl">正在核验......请稍后</view>
					</view>

				</view>
				<view class="tn-flex justify-between">
					<TnButton width="45%" height='64' type="danger" shape="round" @click="goPrev" v-if="!verifyStatus">
						上一步</TnButton>
					<TnButton :width="verifyStatus? '100%':'45%'" height='64' type="danger" shape="round"
						@click="goApply">去申请</TnButton>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TnSteps from '@/uni_modules/tuniaoui-vue3/components/steps/src/steps.vue'
	import TnStepsItem from '@/uni_modules/tuniaoui-vue3/components/steps/src/steps-item.vue'
	import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
	import TnLoading from '@/uni_modules/tuniaoui-vue3/components/loading/src/loading.vue'
	export default {
		components: {
			TnSteps,
			TnStepsItem,
			TnButton,
			TnLoading
		},
		data() {
			return {
				type: '',
				frontImg: '',
				backImg: '',
				verifyStatus: false,
				currentStep: 0,
				stepsData: [{
						title: '身份认证',
						color: '#999999',
						activeIcon: 'circle-fill'
					},
					{
						title: '人脸识别',
						color: '#999999',
						activeIcon: 'circle-fill'
					},
					{
						title: '联网核查',
						color: '#999999',
						activeIcon: 'circle-fill'
					}
				]
			}

		},
		onLoad(options) {
			this.type = options.type
		},
		methods: {
			takePhoto(type) {

				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['camera'],
					camera: 'back',
					success: (res) => {
						console.log('res',res)
						// 验证是否是身份证
						uni.uploadFile({
							url: 'http://116.228.78.26:52800/mobile-bank/face/checkIdCardImg',
							name: 'file',
							filePath: res.tempFiles[0].tempFilePath,
							success: (idCardRes) => {
								console.log('idCardRes',idCardRes)
								let result = JSON.parse(idCardRes.data)
								if ((type === 'backImg' && result.data == "身份证国徽面") || (type ===
										'frontImg' && result.data == "身份证头像面")) {
									uni.getFileSystemManager().readFile({
										filePath: res.tempFiles[0]
										.tempFilePath, //选择图片返回的相对路径
										encoding: 'base64', //编码格式
										success: res => {
											this[type] = 'data:image/jpeg;base64,' +
												res
												.data
										},
										fail: (e) => {
											console.log("图片转换失败");
										}
									})
								}
								else {
									console.log(result)
									uni.showToast({
										title: type === 'backImg'?'身份证国徽面不正确':'身份证头像面不正确',
										duration: 2000,
										icon: 'none'
									});
								}

							},
						})
					}
				})


			},
			getFace() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				const ctx = wx.createCameraContext()
				ctx.takePhoto({
					quality: 'high',
					success: (file) => {
						uni.getFileSystemManager().readFile({
							filePath: file.tempImagePath, //选择图片返回的相对路径
							encoding: 'base64', //编码格式
							success: res => { //成功的回调
								let base64 = 'data:image/jpeg;base64,' + res
									.data
								uni.uploadFile({
									url: 'http://116.228.78.26:52800/mobile-bank/face/detectLiveFace',
									name: 'file',
									filePath: file.tempImagePath,
									success: (res) => {
										let data = JSON.parse(res.data)
										if (data.code === 200) {
											// 人脸比对
											uni.request({
												url: 'http://116.228.78.26:52800/mobile-bank/face/compareFace',
												method: 'POST',
												data: {
													file1: this.frontImg,
													file2: base64
												},
												success: (res) => {
													uni.hideLoading();
													let data = res.data
													if (data.code ===
														200) {
														this.currentStep +=
															1
														setTimeout(() => {
															this.verifyStatus =
																true
														}, 2000)
													} else {
														uni.hideLoading();
														uni.showToast({
															title: data
																.msg,
															duration: 2000,
															icon: 'none'
														});
													}
												},
												fail: (err) => {
													uni.hideLoading();
													console.error('请求失败',
														err);
												}
											});
										} else {
											uni.hideLoading();
											uni.showToast({
												title: data.msg,
												duration: 2000,
												icon: 'none'
											});
										}
									},
									fail: (err) => {
										uni.hideLoading();
										console.error('请求失败', err);
									}
								});
							},
							fail: (e) => {
								uni.hideLoading();
								console.log("图片转换失败");
							}
						})
					}
				})
			},
			goPersonal() {
				uni.navigateTo({
					url: '/pages/person/index'
				});
			},
			goPrev() {
				this.currentStep -= 1
			},
			goCompany() {
				uni.navigateTo({
					url: '/pages/company/index'
				});
			},
			goCheckFace() {
				if (!(this.frontImg && this.backImg)) {
					uni.showToast({
						title: '请上传身份证正反面！',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.currentStep += 1
			},
			goApply() {
				// 验证通过的状态
				uni.setStorageSync('verifyStatus', true)
				// uni.setStorageSync('frontImge', this.frontImg)
				// uni.setStorageSync('backImg', this.backImg)
				if (this.type == 1) {
					uni.redirectTo({
						url: '/packageA/pages/index'
					});
				} else {
					uni.redirectTo({
						url: '/packageB/pages/index'
					});
				}
			}
		}
	}
</script>
<style>

</style>
<style scoped>
	.page {
		height: 100vh;
		width: 100vw;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.content {
		width: 100%;
		height: 100%;
		padding: 42rpx;
		box-sizing: border-box;
	}

	.content ::v-deep .tn-step__mode-dotIcon {
		left: 10rpx;
	}

	.check-image {
		margin: 30rpx 0 60rpx;
		position: relative;
		text-align: center;
	}

	.check-image-bg {
		width: 617rpx;
		height: 399rpx;
	}

	.camera {
		width: 98rpx;
		height: 98rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -49rpx;
		margin-top: -49rpx;
	}

	.check-image text {
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		text-indent: -2em;
	}

	.online-check {
		margin: 200rpx 0;
		text-align: center;
	}

	.check-success {
		width: 498rpx;
		height: 368rpx;
	}

	.btns {
		width: 100%;
	}
</style>